<template>
  <a-card :bordered="false">
    <!-- 搜索区域 -->
    <div class="theknightSearch table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="getList">
        <a-row :gutter="24">
          <a-col :md="4" :sm="4">
            <a-form-item label="会员联系方式" :labelCol="{ span: 5 }" :wrapperCol="{ span: 18, offset: 1 }">
              <a-input placeholder="单行输入" v-model="queryParam.memberPhone"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="8" class="right">
            <a-button type="primary" @click="query" :loading="loading">查询</a-button>
            <a-button type="primary" class="btnWhite" @click="reset" :loading="loading">重置</a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- table区域 -->
    <section class="table" style="margin-top:20px">
      <a-table size="middle" bordered rowKey="id" :columns="columns" :pagination="ipagination" :dataSource="orderList" @change="changePage" :loading="loading">
        <template slot="action" slot-scope="text, record">
          <a href="javascript:;" @click="freeze(record)">发货</a>
        </template>
      </a-table>
    </section>

    <a-modal @cancel="handle" :confirmLoading="modalLoading" v-model="freezeConceal" title="解冻" mask @ok="freezeOk" :destroyOnClose="true">
      <a-form layout="inline" @keyup.enter.native="getList">
        <a-row :gutter="24">
          <a-col :md="24" :sm="24">
            <a-form-item label="请选择快递公司" :labelCol="{ span: 15 }" :wrapperCol="{ span: 20, offset: 1 }">
              <a-select v-model="chooseOrder.expressCompany" :disabled="dis" placeholder="请选择">
                <a-select-option value="邮政">邮政</a-select-option>
                <a-select-option value="申通">申通</a-select-option>
                <a-select-option value="顺丰">顺丰</a-select-option>
                <a-select-option value="圆通">圆通</a-select-option>
                <a-select-option value="极兔">极兔</a-select-option>
                <a-select-option value="菜鸟">菜鸟</a-select-option>
                <a-select-option value="京东">京东</a-select-option>
                <a-select-option value="中通">中通</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="24" :sm="24">
            <a-form-item label="快递单号" :labelCol="{ span: 6 }" :wrapperCol="{ span: 20, offset: 1 }">
              <a-input placeholder="单行输入" :disabled="dis" v-model="chooseOrder.expNo"></a-input>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-modal>
  </a-card>
</template>
<script>
import Vue from 'vue'
import store from '@/store'
import { postAction, getAction, putAction, deleteAction } from '@/api/manage'
export default {
  name: 'TheknightfreezeList',
  components: {},
  data() {
    return {
      modalLoading: false,
      loading: false, //tabs 是否加载
      substationList: [], // 分站列表
      chooseOrder: '', // 选中的数据
      freezeConceal: false, //发货
      isBranchFlag: false, // 当前登录用户是否分站用户
      // 列表表头
      columns: [
        {
          title: '订单号',
          dataIndex: 'orderNo',
          align: 'center'
        },
        {
          title: '累计消费积分',
          align: 'center',
          dataIndex: 'pointSum'
        },
        {
          title: '快递公司',
          align: 'center',
          dataIndex: 'expressCompany'
        },
        {
          title: '快递单号',
          align: 'center',
          dataIndex: 'expressNo'
        },
        {
          title: '会员联系方式',
          align: 'center',
          dataIndex: 'memberPhone'
        },
        {
          title: '下单时间',
          align: 'center',
          dataIndex: 'createTime'
        },
        {
          title: '状态',
          align: 'center',
          dataIndex: 'status',
          customRender: function (text) {
            if (text == 0) {
              return '支付中'
            } else if (text == 1) {
              return '待发货'
            } else if (text == -1) {
              return '已取消'
            } else if (text == -2) {
              return '售后申请'

            } else if (text == 2) {
              return '待收货'

            } else if (text == 3) {
              return '已完成'

            } else if (text == -3) {
              return '退款完成'
            }
          }
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' }
        }
      ],
      //标记页数；页码
      ipagination: {
        current: 1,
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        total: 0
      },
      dis: true,
      orderList: [], // 列表数据
      // 请求参数
      queryParam: {
        branchId: undefined,
        registerType: undefined,
        mobile: '',
        name: '',
        pageNo: '1',
        pageSize: 10
      },
      url: {
        list: '/exchangeOrderBase/mkExchangeOrderBase/list',
        frozen: '/exchangeOrderBase/mkExchangeOrderBase/post' // 发货
      }
    }
  },
  created() {
    console.log(this.$store.state.user.info.branchId, '获取当前登录用户的分站')
    const ut = store.getters.userInfo.userType
    this.isBranchFlag = ut == 2 || ut == 3 ? true : false
    if (this.isBranchFlag) {
      this.queryParam.branchId = store.getters.userInfo.branchId
    }
    this.getList()
  },
  methods: {
    handle() {
      console.log(1)
      this.dis = true
      this.chooseOrder = {}
    },
    // 获取列表
    getList() {
      this.loading = true
      getAction(this.url.list, this.queryParam).then(res => {
        console.log(res, '骑士列表')
        // if (res.success) {
        console.log(res.result.records, '骑士列表')
        this.orderList = res.result.records
        this.ipagination.total = res.result.total
        // }
        this.loading = false
      })
    },
    // 代理列表改变分页
    changePage(pagination) {
      console.log(pagination)
      this.ipagination.current = pagination.current
      this.queryParam.pageNo = pagination.current
      this.queryParam.pageSize = pagination.pageSize
      this.getList()
    },
    onClose() {
      this.chooseOrder = '' //清除选中的一行数据
      console.log('关闭')
    },
    // 发货
    freeze(e) {
      this.chooseOrder = e
      this.freezeConceal = true
      if (!e.expressNo) {
        this.dis = false
      }
    },
    // 确认
    freezeOk() {
      if (this.dis) {
        this.freezeConceal = false
        return
      }
      this.modalLoading = true
      postAction(this.url.frozen, {
        expComp: this.chooseOrder.expressCompany,
        expNo: this.chooseOrder.expNo,
        orderId: this.chooseOrder.id,
      }).then(res => {
        console.log(res, '发货')
        if (res.success) {
          this.getList()
          this.$message.success('成功')
          this.freezeConceal = false
        } else {
          this.$message.warning('失败')
        }
        this.modalLoading = false
      })
      this.onClose()
    },
    // 查询
    query() {
      this.queryParam.pageNo = '1'
      this.getList()
      console.log('查询', this.queryParam)
    },
    // 重置
    reset() {
      this.queryParam = {
        branchId: this.$store.state.user.info.branchId,
        registerType: undefined,
        mobile: '',
        name: '',
        pageNo: '1',
        pageSize: 10
      }
      this.ipagination.current = 1
      this.chooseOrder = ''
      this.getList()
      console.log('重置')
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    }
  }
}
</script>
<style lang="less" scoped>
.theknightSearch {
  margin-top: -15px;
  padding: 15px 10px;
  .ant-form-item {
    width: 100%;
  }
}
.fenyong {
  width: 160px;
}
.table-page-search-wrapper .ant-form-inline .ant-form-item {
  margin-bottom: 0px !important;
}
.button-group {
  width: 100%;
  margin: 10px 0;
  display: flex;
  justify-content: space-between;
  .left {
    button {
      margin: 5px 10px;
    }
  }
}
.btnRed {
  background-color: #ff1862;
  border: none;
}
.btnWhite {
  color: black;
  background-color: #fff;
}
.right {
  button {
    margin-right: 10px;
  }
}
.RulesBtn {
  float: right;
  margin-top: 100px;
}
.editor {
  .ant-form-item {
    margin-bottom: 0px !important;
  }
}
//详情
.Detaile {
  div {
    margin-bottom: 0 !important;
  }
}
</style>
